<template>
  <div>
    <div class="reactive">这是reactive的数组：<span v-for="(item, i) in arr" :key="i">{{ item }}</span></div>
    <h2 style="font-weight: bold;">组件useOptions</h2>
    <useOptions :option="data" @changeStatus="changeStatus" />
    <h2 style="font-weight: bold;">组件useComposition</h2>
    <useComposition ref="child1" v-model="data.title" v-model:user="data.user" @look-test-data="lookTestData" />
    <el-button class="bg-sky-600" type="primary" @click="updateTitle">点击改变</el-button>
    <el-button class="bg-lime-500" type="success" @click="clickHandle">显示提示框</el-button>
    <msg-box v-if="showMsg" :title="msg" :message="popupMessage"  @close="clickHandle"></msg-box>
  </div>
</template>

<script setup>
// import useOptions from '@/components/useOptions.vue'
// import useComposition from '@/components/useComposition.vue';
import { reactive, onMounted, ref } from 'vue'
import msgBox from '@/utils/showMsg';
const data = reactive({
  title: '看一看',
  user: {
    name: 'Alan',
    age: 18
  }
})
const arr = reactive([])
const showMsg = ref(false)
const child1 = ref(null)
const changeStatus = (state) => {
  console.log('res', state)
}
const updateTitle = () => {
  data.title = '走一走'
  data.user.age = 33
  const nowValue = parseInt(Math.random() * 10)
  arr.push(nowValue)
}
const lookTestData = (value) => {
  console.log(`测试数据:${ value }`)
}

onMounted(() => {
  console.log('获取子组件内容', child1.value.data.useWay)
  child1.value.testExport()
  // console.log('---', child1.value.init()); // 报错，init是子组件私有的
})

const msg = ref('提示消息')
const popupMessage = ref('Hello, world!')
const clickHandle = () =>{
  showMsg.value = !showMsg.value
}
</script>

<style lang="scss" scoped>
.reactive {
  margin-bottom: 10px;
  span {
    padding: 0 2px;
  }
}
.content {
  background-color: #0f0;
}
</style>